body {
  overflow: hidden;
}
.time-selector {
  z-index: 999;
  left: 37%;
}
.more-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.leaflet-draw {
  right: 460px;
  top: 790px;
  display: none;
}

.topheader {
  position: absolute;
  z-index: 10;
  pointer-events: none;

  .titlebar {
    width: 1920px;
    height: 211px;
    background: url(../imgs/zhcs/title-bg.png);
    margin: 0 auto;

    .title {
      text-align: center;

      .appname {
        font-size: 50px;
        line-height: 80px;
        color: #fff;
        font-weight: bolder;
      }

      .line {
        height: 14px;
        width: 10px;
        display: inline-block;
        padding: 10px 0px;
        margin-top: 5px;
        margin-left: 10px;
        border-left: 2px solid #fff;
        transform: translateY(4px);
      }

      .key {
        font-size: 40px;
        color: #fef236;
        font-weight: bolder;
        display: inline-block;
      }
    }
  }
  

  .backIcon {
    pointer-events: all;
    cursor: pointer;
    position: absolute;
    left: 20px;
    top: 20px;
    height: 32px;
    color: #fff;
    line-height: 37px;
    text-indent: 50px;
    font-size: 22px;
    background: url(../imgs/zhcs/bicon.png);
    background-repeat: no-repeat;

  }
}

.top-elements {
  position: absolute;
  z-index: 900;
  left: 490px;
  top: 110px;
  .topchecker {
    z-index: 900;
    display: flex;
    color: #fff;
    font-size: 18px;
    width: 960px;
    .hide-more {
      height: 40px;
      overflow: hidden;
    }
    .lf-t {
      color: #fff;
      line-height: 38px;
      width: 105px;
    }
    .items {
      display: flex;
      flex-grow: 1;
      // cursor: pointer;
      max-width: 850px;
      flex-wrap: wrap;
      .item {
        position: relative;
        width: 122px;
        height: 38px;
        line-height: 38px;
        background: url(../imgs/zhcs/c0.png);
        margin-right: 15px;
        text-indent: 36px;
        margin-bottom: 8px;
        .more-ellipsis;
        img {
          position: absolute;
          width: 24px;
          height: 24px;
          left: 7px;
          top: 7px;
        }
        .del {
          display: none;
          cursor: pointer;
          position: absolute;
          right: 3px;
          text-indent: 0;
          font-size: 22px;
          top: 4px;
          width: 14px;
          height: 10px;
          line-height: 10px;
          color: orange;
        }
        &:hover {
          .del {
            display: block;
          }
        }
      }
     
    }
    .right-ud {
      width: 28px;
      height: 34px;
      background: url(../imgs/zhcs/zd.png);
      background-size: 100% 100%;
      cursor: pointer;
      max-width: 28px;
    }
  }
  .local-zb {
    zoom: 1 !important;
    margin-top: 20px;
    left: 0;
    background: linear-gradient(to right, rgba(0, 119, 255, 0.69), rgba(0, 119, 255, 0.06));
    position: relative;
    ul li {
      color: #fff;
      &:last-child {
        color: #FFEB3B;
      }
    }
  }
  
}

.flex-btw {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#left-llqd {
  position: absolute;
  z-index: 1;
  left: 20px;
  top: 120px;
  width: 406px;
  height: 918px;
  background: url(../imgs/zhcs/leftbg.png);
  transition: transform 200ms linear;

  &.right {
    left: unset;
    right: 20px;
    background: url(../imgs/zhcs/leftbg.png);

    .toptitle {
      left: unset;
      right: 0;
    }

    .toggle-btn {
      transform: rotateY(180deg);
      left: -36px;
    }

    &.hide {
      transform: translateX(430px);
    }
  }

  .toggle-btn {
    width: 35px;
    height: 169px;
    background: url(../imgs/zhcs/toggle1.png);
    position: absolute;
    right: -29px;
    top: 360px;
    cursor: pointer;
    transition: transform 0.2s linear;
  }

  &.hide {
    transform: translateX(-420px);
  }

  .toptitle {
    position: absolute;
    left: 0px;
    top: -28px;
    width: 308px;
    height: 61px;
    background: url(../imgs/zhcs/toptitle.png);
    .flex-btw;

    .ft {
      font-size: 26px;
      background-image: -webkit-linear-gradient(bottom, #fff, #9bf3f7);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-indent: 15px;
    }

    .title {
      font-size: 24px;
      color: #fff;
      text-indent: 20px;
      width: 160px;
    }
  }

  .menu-options {
    .flex-btw;
    margin: 50px 10px 0px;

    .item {
      width: 89px;
      height: 129px;
      background: url(../imgs/zhcs/mpi.png);
      background-position: 3px 0;
      cursor: pointer;

      .name {
        font-size: 25px;
        text-align: center;
        margin-top: 22px;
        color: #c2c9da;
      }

      &.active {
        background: url(../imgs/zhcs/mpia.png);
        background-position: 3px 0;
        cursor: default;

        .name {
          color: #fff;
        }
      }
    }
  }

  .menu-details {
    margin-top: -40px;

    .mp-body {
      .style-scroller;
      width: 395px;
      height: 750px;
      margin-top: 20px;
      overflow-y: auto;

      .oitem {
        color: white;
        font-size: 24px;
        margin: 20px 0px 0px 20px;
        padding-left: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        display: flex;
        align-items: center;
        cursor: default;
        position: relative;

        &.parent {
          background: linear-gradient(to right, rgba(89, 123, 244, 0.3), transparent);
        }

        .select {
          background: url(../imgs/wg/27/l6.png);
          background-size: 200% 100%;
          width: 20px;
          height: 20px;
          cursor: pointer;
        }

        &.active {
          .select {
            background-position: 20px 0;
          }
        }

        img {
          margin-left: 10px;
          width: 30px;
        }

        .name {
          margin-left: 10px;

          &.pointer {
            cursor: pointer;
          }
        }

        .count {
          margin-left: 10px;
          font-size: 20px;
          color: yellow;
          cursor: pointer;
        }

        .new {
          position: relative;
          background: red;
          color: #fff;
          padding: 0 10px;
          border-radius: 7px;
          margin-left: 10px;
          height: 28px;
          font-size: 14px;
          line-height: 28px;
          cursor: pointer;

          &::after {
            position: absolute;
            content: '';
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-right: 15px solid red;
            border-bottom: 10px solid transparent;
            border-left: 11px solid transparent;
            left: -17px;
            top: 3px;
          }
        }
      }

      .titlebar {
        height: 40px;
        line-height: 34px;
        display: flex;
        align-items: center;
        margin: 10px 0;
        &.abs {
          position: absolute;
          right: 0;
          z-index: 1;
        }
        .title {
          font-size: 20px;
          color: #8aaeeb;
          height: 34px;
          background: #151d87;
          padding: 0 10px;
          min-width: 84px;
          max-width: 84px;

          &::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: 103px;
            border-top: 35px solid #141e87;
            border-right: 20px solid transparent;
          }
        }

        .searchbar {
          flex-grow: 1;
          width: 90px;
          position: relative;
          .search {
            position: absolute;
            background: url(../imgs/zhcs/fdj.png);
            width: 19px;
            height: 19px;
            right: 24px;
            top: 8px;
            cursor: pointer;
          }
          input {
            background: #0d416e;
            border-radius: 50px;
            border: 1px solid #119ca4;
            outline: none;
            height: 34px;
            font-size: 20px;
            line-height: 34px;
            color: #fff;
            text-indent: 20px;
            position: relative;
            width: calc(~"100% - 10px");

            &::placeholder {
              color: #62a2d1;
              text-indent: 10px;
            }
          }
        }

        .close {
          width: 40px;
          height: 40px;
          cursor: pointer;
          background: url(../imgs/zhcs/return.png);
        }

        .back {
          position: absolute;
          cursor: pointer;
          right: 10px;
          color: #fff;

          &::before {
            content: '<';
            margin-right: 5px;
          }
        }
      }

      .optionbar {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;

        .oitem {
          flex: 1;
          text-align: center;
          margin: 0 5px;
          color: #94acf3;
          font-size: 18px;
          cursor: pointer;
          height: 30px;
          width: 114px;
          line-height: 33px;
          background: url(../imgs/zhcs/tabp.png);
          padding: 5px 15px;
          background-size: 100% 100px;
          background-position: 0 45px;

          &.active {
            cursor: default;
            color: #48e2fc;
            background: url(../imgs/zhcs/tabp.png);
            background-size: 100% 105px;
            background-position: 0 -6px;
          }
        }
      }

      .sj-list {
        height: 700px;
        overflow-y: auto;
        .style-scroller;
        .sj-item {
          margin: 10px 15px 10px 10px;
          padding-bottom: 5px;
          border-bottom: 1px solid #91a2d1;
          color: #5a99e4;
          cursor: pointer;
          display: flex;
          position: relative;
          .left {
            border: 1px solid #5a99e4;
            margin-right: 10px;
            width: 100px;
            height: 80px;

            img {
              width: 100%;
              height: 100%;
            }
          }
          .level {
            min-width: 40px;
            >div {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-around;
              height: 100%;
              span {
                color: #24cee5;
                font-size: 18px;
                margin-top: -20px;
              }
              &.jj {
                span {
                  color: #ddcb36;
                }
              }
            }
          }
          .target {
            position: absolute;
            width: 38px;
            height: 38px;
            background: url(../imgs/zhcs/target.png);
            cursor: pointer;
            right: 5px;
            top: 31%;
          }
          .right {
            margin-left: 20px;
            flex-grow: 1;
            max-width: calc(~"100% - 50px");
            .title {
              color: #fff;
              font-size: 21px;
              margin-bottom: 10px;
              .more-ellipsis;
            }

            .len {
              display: flex;
              min-height: 22px;
              margin: 5px 0;
            }
            .it {
              color: #8ca8ca;
              font-size: 18px;
            }
          }
        }
      }

      .ry-list {
        .ry-item {
          margin: 10px 15px 10px 10px;
          padding-bottom: 5px;
          border-bottom: 1px solid #91a2d1;
          color: #fff;
          cursor: pointer;

          &.active {
            background: linear-gradient(to right, #276fa0, #ffffff00);
          }

          &.online {
            .len .status {
              color: #00f8fe;
            }

            .len .name {
              color: #fff;
            }

            .len .name::before {
              background: url(../imgs/wg/423/zfya.png);
            }
          }

          .len {
            display: flex;
            justify-content: space-between;
            height: 40px;
            line-height: 40px;
            font-size: 16px;

            .name {
              flex: 4;
              position: relative;
              text-indent: 30px;
              font-size: 18px;

              &::before {
                content: '';
                background: url(../imgs/wg/423/zfy.png);
                width: 23px;
                height: 24px;
                background-size: 100%;
                position: absolute;
                top: 7px;
                left: 0;
              }
            }

            .status {
              flex: 1;
              font-size: 18px;
              text-align: right;
              color: #fcfd6d;
            }

            // .dept {

            // }
            .time {
              text-indent: 25px;
              font-size: 14px;
              color: #91accb;
              position: relative;
            }

            .time-use {
              position: relative;
              margin-left: 20px;
              color: #fff;
              text-indent: 10px;
              font-size: 18px;

              &::before {
                content: '';
                background: url(../imgs/zhcs/sc.png);
                width: 23px;
                height: 26px;
                background-size: 100%;
                position: absolute;
                top: 7px;
                left: -20px;
              }
            }

            .distance {
              text-align: right;
              position: relative;
              margin-left: 20px;
              color: #fff;
              text-indent: 10px;
              font-size: 18px;

              &::before {
                content: '';
                background: url(../imgs/zhcs/lc.png);
                width: 23px;
                height: 26px;
                background-size: 100%;
                position: absolute;
                top: 6px;
                left: -20px;
              }
            }
          }
        }
      }

      .jk-list {
        .jk-item {
          margin: 10px 15px 10px 10px;
          padding-bottom: 5px;
          border-bottom: 1px solid #91a2d1;
          color: #5a99e4;
          cursor: pointer;

          .title {
            color: #fff;
            font-size: 22px;
            position: relative;
            padding-right: 40px;
            max-height: 60px;
            .more-ellipsis;
            &::after {
              content: '';
              background: url(../imgs/wg/423/sp4.png);
              width: 29px;
              height: 18px;
              background-size: 100%;
              position: absolute;
              top: 8px;
              right: -6px;
            }
          }

          .len {
            display: flex;
            justify-content: space-between;
            height: 36px;
            line-height: 36px;
            font-size: 18px;

            .it {
              flex: 1;
            }
          }
        }
      }

      .ry-detail {
        padding: 10px;
        height: 780px;
        overflow-y: auto;
        .style-scroller;
        .basic-info {
          .flex-btw;
          .len {
            font-size: 18px;
            color: #fff;
            line-height: 30px;
          }

          &.part2 {
            display: block;
            margin: 10px 0;
          }
          .left {
            img {
              max-width: 90px;
              border-radius: 50%;
            }
          }

          .right {
            flex-grow: 1;
            line-height: 40px;
            margin-left: 10px;

            .name {
              color: #fff;
              font-size: 22px;
              position: relative;
            }
            .status {
              font-size: 22px;
              color: #fcfd6d;
              &.online {
                color: #00f8fe;
              }
            }
          }
        }
      }
      .btns {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
        .item {
          cursor: pointer;
          width: 150px;
          height: 48px;
          text-align: center;
          line-height: 48px;
          font-size: 22px;
          color: #FFF;
          margin: 20px 0 10px;
          a {
            color: #fff !important;
            text-decoration: none;
          }
          &._1 {
            background: url(../imgs/zhcs/btn_1.png);
          }
          &._2 {
            background: url(../imgs/zhcs/btn_2.png);
          }
          &._3 {
            background: url(../imgs/zhcs/btn_3.png);
          }
          &._4 {
            background: url(../imgs/zhcs/btn_4.png);
          }
        }
      }
      .sptitle {
        margin: 20px 0 10px;
        position: relative;
        border-bottom: 1px solid #212e9b;
        height: 40px;

        .name {
          font-size: 22px;
          color: #fff;
          text-indent: 30px;

          &.aj::before {
            content: '';
            background: url(../imgs/wg/423/aj.png);
            width: 22px;
            height: 22px;
            position: absolute;
            left: 0;
          }

          &.sj::before {
            content: '';
            background: url(../imgs/wg/423/zb.png);
            width: 22px;
            height: 22px;
            position: absolute;
            left: 0;
          }
        }
      }

      .dsjs {
        .it {
          color: #fff;
          height: 35px;
          line-height: 35px;
          font-size: 16px;

          .title {
            cursor: pointer;
            position: relative;
            .more-ellipsis;

            &.warn::after {
              content: '';
              width: 14px;
              height: 15px;
              position: absolute;
              top: 9px;
              margin-left: 6px;
              background: url(../imgs/wg/423/jj.png);
            }
          }
        }
      }

      .detailbtn {
        background-color: #0d70f7;
        color: #fff;
        font-size: 20px;
        padding: 2px 20px;
        width: 130px;
        text-align: center;
        margin: 10px auto;
        cursor: pointer;
      }

      .sj-detail {
        height: 840px;
        overflow-y: auto;
        .style-scroller;
        padding: 10px;

        .basic-info {
          .title {
            color: white;
            font-size: 22px;
            line-height: 36px;
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            &.jj {
              &::before {
                content: '';
                background: url(../imgs/wg/423/jj.png);
                width: 16px;
                height: 16px;
                background-size: 100%;
                position: absolute;
                top: 14px;
                right: 8px;
              }
            }
          }

          .flex {
            display: flex;
            display: flex;
            align-items: center;
          }

          .headImg {
            width: 100px;
            height: 120px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .imgView {
            margin: 20px 0;

            >div {
              position: relative;
              display: inline;
              margin: 0 6px;
            }

            .imgDiv::after {
              position: absolute;
              content: ' ';
              width: 68px;
              height: 23px;
              background: url(../imgs/wg/423/27.png) no-repeat;
              left: 0;
            }

            img {
              width: 135px;
              height: 90px;
              margin-bottom: 10px;
            }

            .afterDo::after {
              background-position: 0 -28px;
            }
          }

          .abstracts {
            color: #fff;
            font-size: 18px;

            .item {
              line-height: 38px;
              display: flex;

              .key {
                color: #8ca0f5;
                width: 100px;
              }
            }
          }

          .viewbtn {
            background: url(~static/imgs/zhdd/5.png) no-repeat;
            width: 190px;
            height: 50px;
            margin: 18px auto;
            cursor: pointer;
          }

          .actionb {
            color: white;
            font-size: 22px;
            cursor: pointer;
            width: 140px;
            border-radius: 10px;
            height: 36px;
            line-height: 36px;
            border: 2px solid #83ffce;
            text-align: center;
            margin: 35px auto -10px;
          }
        }
      }

      .pageFloat {
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;

        .p {
          width: 132px;
          height: 30px;
          background-size: 100% 100%;
          margin: 0 5px;
        }

        .left {
          cursor: not-allowed;
          background-image: url(../imgs/wg/423/z1.png);

          &.active {
            background-image: url(../imgs/wg/423/z2.png);
            cursor: pointer;
          }
        }

        .right {
          cursor: not-allowed;
          background-image: url(../imgs/wg/423/y1.png);

          &.active {
            background-image: url(../imgs/wg/423/y2.png);
            cursor: pointer;
          }
        }
      }
    }

    ._T {
      position: absolute;
      top: 15px;
      left: 15px;
      width: 380px;
      height: 865px;
    }

    .search6 {
      .searchInput {
        width: 269px;
        height: 45px;
        margin: 24px 10px 0;
        background: url(../imgs/wg/27/l7.png);
        display: flex;
        align-items: center;
        position: relative;

        &::before {
          content: '';
          background: url(../imgs/wg/27/l2.png) no-repeat;
          background-size: 100%;
          width: 20px;
          height: 20px;
          margin: 0 10px;
        }

        input {
          border: none;
          background: none;
          color: white;
          width: calc(100% - 40px);
          font-size: 16px;

          &::placeholder {
            color: #8AAED5;
          }
        }
      }

      .btns {
        margin: 30px 32px 0;
        display: flex;
        justify-content: space-around;

        .btn {
          width: 100px;
          height: 32px;
          line-height: 32px;
          background: url(../imgs/wg/27/l8.png);
          text-align: center;
          font-size: 20px;
          color: #fff;
          cursor: pointer;
        }
      }

      .result {
        margin: 24px 10px 0;

        .title {
          font-size: 18px;
          color: #fff;
          height: 30px;
          line-height: 30px;
          border-bottom: 1px #3099e2 solid;
        }

        .items {
          margin-top: 10px;
          height: 590px;
          overflow-y: auto;
          .style-scroller;

          .item {
            display: flex;

            .left {
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              text-align: center;

              .icon {
                width: 22px;
                height: 35px;
                background-size: 100% 100%;
                background: url(../imgs/map/markers.png);
                background-position: 74px 112px;
                color: #fff;
                text-align: center;
                line-height: 25px;
                font-size: 16px;
              }

            }

            &:hover {
              background: #fff2f217;

              .left .icon {
                background-position: 74px 76px;
              }
            }

            .right {
              .t {
                font-size: 20px;
                color: #f7fc66;
                font-weight: bold;
              }

              .text {
                font-size: 20px;
                color: #fff;
              }
            }
          }
        }
      }
    }

    .clsBtn {
      cursor: pointer;
      width: 55px;
      height: 55px;
      background: url(../imgs/cls.png);
      margin: 20px auto;
      bottom: 40px;
      left: 0;
      right: 0;
    }
  }
}

#bjlk {
  width: 78px;
  height: 80px;
  background: url(../imgs/zhcs/lk1.png);
  cursor: pointer;
  position: absolute;
  right: 460px;
  bottom: 50px;
  z-index: 500;
  &.active {
    background: url(../imgs/zhcs/lk2.png);
  }
}

.slide-enter-active{
  transition:all .5s linear;
}
.slide-leave-active{
  transition:all .1s linear;
}
.slide-enter{
  transform: translateX(-100%);
  opacity: 0;
}
.slide-leave-to{
  transform: translateX(110%);
  opacity: 0;
}

.clusterAll{
  text-align: center;
  color:#fff;
  font-size: 17px;
  &._population{
    background-image: url(../imgs/zhcs/cluster/population4.png);
  }
  &._address{
    background-image: url(../imgs/zhcs/cluster/address4.png);
  }
  &._events{
    background-image: url(../imgs/zhcs/cluster/events4.png);
  }
  &._things{
    background-image: url(../imgs/zhcs/cluster/things4.png);
  }
  &._organization{
    background-image: url(../imgs/zhcs/cluster/organization5.png);
  }
  &._normal {
    background-size: 100% 100%;
    line-height: 48px;
  }
  &._big {
    background-size: 100% 100%;
    line-height: 60px;
  }
}


.bottomMenus {
  position: absolute;
  z-index: 400;
  left: 0;
  color: #fff;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  .container {
    display: flex;
    .item {
      background: #807474;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 10px;
      cursor: pointer;
      &:hover {
        background: #5840c3;
      }
      .name {
        color: #fff;
      }
    }
  }
}

.sjPopupFrame {
  background: rgba(136, 139, 175, 0.5);
}

.layerSkin {
  position: absolute;
  border-radius: 8px;
  padding: 0px 5px 10px 5px;
  background: rgba(30,64,89,0.75);
  .layui-layer-title{
    background-color: rgba(19, 55, 81, 0);
    border-bottom: 0px solid rgba(19, 55, 81, 0.8);
    color: rgb(248, 248, 248);
    font-size: 20px;
    cursor: move;
  }
  .layui-layer-content {
    
  }
}